<script setup lang="ts">
import { useI18n } from 'vue-i18n';
// import CommonHeader from '@/components/commonHeader/index.vue'
definePageMeta({
  layout: 'default-back',
  title: '设置',
  i18n: 'menu.setting',
})
const { t } = useI18n();
const userStore = useUserStore()
const router = useRouter()
const goBindPhone = () => {
  if (!userStore.user.mobile) {
    router.push('/my/setting/bindPhone')
  } else {
    router.push('/my/setting/updatePwd')
  }
}
</script>

<template>
  <div  mx-auto text-16>
    <!-- <CommonHeader title="设置" /> -->
    <div class="list">
      <van-cell :title="t('my_page.setting.updatePwd.title')" is-link  @click.stop="goBindPhone" />
      <van-cell :title="t('my_page.person.title')" is-link to="/my/setting/person" />
      <van-cell :title="t('my_page.setting.checkUpdate')" value="V2.0.1" />
    </div>
  </div>
</template>
<style lang="css" scoped>
.list {
  background-color: #323838;
  border-radius: 12px;
  /* border: solid 1px rgba(255, 255, 255, 0.22); */

}

::v-deep .van-cell--clickable:first-child {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

::v-deep .van-cell--clickable:last-child {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

::v-deep .van-cell:after {
  border-bottom: 2px solid #474c4c;
}

::v-deep .van-cell__right-icon {
  color: #ffffff;
  opacity: 0.7;
}

::v-deep .van-cell__title,
.van-cell__value {
  color: #ffffff;
}

::v-deep .van-cell {
  background: transparent;
  color: #ffffff;
  align-items: center;
  padding: 13PX;
}
</style>
